Finished page layouts can be converted to HTML files by clicking Save HTML (menu bar). You can also view, edit and independently save the style sheet for the current page by clicking Style Sheet (menu bar).
Getting Started
You must first set the page size using the Page Setup dialog (click Page Setup on the menu bar). The maximum size is 1200 pixels wide by 5000 pixels high, and the default is 700 by 1000. You can also set margins at the page top and left, enter a title that will appear in the browser title bar and choose a layout grid. Page elements will not automatically snap to the grid - you must choose snapping values separately from the options provided.
At the bottom of the Page Setup dialog there are options for determining the way in which Cascade DTP calculates the size of text boxes. Choosing Standards compliant will ensure that the width and height of text boxes (set in the Text Box Properties dialog) is not affected by borders and padding. For example, if you have specified the width and height of a box to be 200 pixels, and then apply a border of 10 pixels, Cascade DTP will generate CSS code containing width and height measurements of 180 pixels. Unfortunately, Internet Explorer version 5 (IE5) interprets CSS box dimension code incorrectly - it makes the outside dimensions of a box equal to the CSS width and height measurements, irrespective of any border or padding values. Internet Explorer version 6 (IE6) is capable of interpreting box dimensions correctly, but it can also be instructed to mimic the incorrect behaviour of IE5. Selecting the IE5 compatibility option will therefore force IE6 to mimic IE5, thus ensuring that pages look exactly the same in both versions (and also in the Opera browser). However, the Netscape and Firefox browsers cannot be instructed to mimic IE5. This means that if a significant proportion of your audience will be using Netscape or Firefox, you may wish to select the Standards compliant option. Standards compliant pages will generally look the same in IE6, Netscape, Firefox and Opera. Note that the default setting is Standards compliant. The option chosen will be saved in the .cas4 file.
Page View
A representation of the page (initially white) is positioned at the far right of the application window. The default view magnification is 60%, which ensures that there is space to the left of the page for the dialogs. The content will appear smaller than when the page is rendered in the browser, and text less than about 10 points in size will become illegible. Clicking Zoom (menu bar) will increase the page view magnification to 100% (subsequent clicks will cause the zoom to toggle between 60% and 100%). Although 100% zoom is useful for fine positioning and alignment of placed objects, the larger page size will restrict the room available for dialogs. If a dialog becomes hidden under the page, either click the button used to launch it or, in the case of the Text Box Properties and Place Image dialogs, click one of the text or image boxes (see below). The text box view provided within the application does not show all aspects of the formatting. For example, Borders and padding will not be visible, fully justified text will appear left justified, and you will not be able to see changes to letter and line spacing. To obtain an accurate view of the entire page, click Preview (menu bar). This will display the page in your Internet browser. To view the contents of the currently selected text or image box only, click Box Preview (menu bar). The Box Preview dialog is provided with a Refresh button. This should be clicked to view any changes made while the dialog is open.
Text Boxes
In order to place a text box on the page, click Text Box (menu bar) and select New. Once placed, boxes can be re-selected by clicking on them, or via Text Box (menu bar), List. Selection is indicated by a small red rectangle at the top left of the box. Note that you may have to click the box twice to ensure it is properly selected. You can drag the box to the desired position with the mouse (make sure the mouse pointer is near the centre of the box before holding down the left button), or use the four keyboard arrow keys. To alter the box width, place the mouse pointer near the right of the box (the pointer will change to a double headed arrow) and then drag. You can also hold down the control key [Ctrl] and then press the Left or Right arrow key. To change the box height, drag from near the bottom (or use Ctrl + the Up or Down arrow key). Alternatively, values for position and size may be entered directly by first clicking within the white rectangle that shows these measurements (top left of the Text Box Properties dialog). This method also gives access to the Auto Height option that allows the text box height to be set automatically according to the amount of text. Note: If Auto Height has been selected, the height of the box shown in the page view will grow or shrink to accommodate the text placed in it. However, the sizing of the box will not always be shown accurately in the application page view, so you should use Preview or Box Preview to check this. Also, checking Auto Height will disable Scroll overflowed text.
Tip: To dictate the initial position of a new text box, click the page at the point where you wish the top left hand corner of the box to appear before clicking Text Box (menu bar). This is useful when you are working near the bottom of a long page.
Working with Text
To add text to a text box, or to edit text already placed in it, double click the box. This will launch the Text Editor .
Text Classes
The appearance and alignment of any portion of text within a text box may be modified using a Text Class. Once defined, Text Classes may be used numerous times - this makes them ideal for styling repeated page elements such as sub-headings and menu list items. Not only do Text Classes ensure consistency in your designs, they also make it easier to apply changes, because any editing of a text class will automatically be applied to all elements that are styled by that class.
To define a Text Class click Text Class (menu bar) and then select New. The Text Class Properties dialog is very similar to the text box dialog except that a few inapplicable items are either removed or disabled. Once a Text Class has been defined, it can be applied to any block of placed text by selecting the text within the Text Editor dialog and then clicking either Div or Span (these buttons are just underneath the text window, at the right). Using Div (divider) will add line breaks before and after the selected text. This is ideal for sub headings, which can then be positioned relative to the preceding and following paragraphs using appropriate values of top and bottom padding (Text Class Properties dialog). Span does not add line breaks and is typically used to highlight text - e.g. by altering its color.
Images
To place an image, click New Image Box (menu bar). Image box selection is indicated by a small blue rectangle at the top left of the box. You can position image boxes using either your mouse, keyboard arrow keys or direct entry, as described above for text boxes. Note, however, that you cannot alter the size of an image box - its dimensions will be determined by the image placed into it. You can work with either GIF, JPG or PNG files, but note that Cascade DTP cannot display PNG images - you must use Preview or Box Preview to see these.
Once a text or image box has been selected, you can use the Tab key to move the selection to the next text or image box (i.e. you can tab through either all of the text boxes or all of the image boxes depending on which type is selected before you press the key). This facility is useful for selecting boxes that have been placed within others, and may therefore be difficult to click on.
Graphic Elements
Although the term Text Box implies that text will always be placed within it, you can actually use a text box purely as a graphic element. For example, a text box with a width of, say, 500 pixels, a height of 3 pixels, and with a suitable background color, may be used as a horizontal rule.
When you place, or select, a text box, the Text Box Properties dialog will appear. Similarly, the Place Image dialog is launched when an image box is selected. Help text specific to these dialogs - and others - is available by clicking the Help buttons near the top of each dialog.
Deleting a Box
To delete a text or image box, right click on it. You will then be asked to confirm your intention.
Special Functions
Cascade DTP provides a wide range of facilities for customising the look of your web pages, and for editing and managing style sheets. To change the page background click Background (menu bar). Similarly, you can define custom scrollbar color schemes (Scrollbars), set the appearance of hyperlinks (Link Style), and edit the cascading style sheet (Style Sheet).
Limitations
Multiple selection of page objects is not possible in this version of Cascade DTP. However, text box properties can be copied and pasted between boxes using the Text Box Properties dialog. It is only possible to open one page at a time, and multiple instances of the application are forbidden. The Windows Display Properties (Settings tab > Advanced) DPI setting must be set to "Normal size (96 DPI)", otherwise Cascade DTP cannot function.
Site Files
When an image is placed on the page, Cascade DTP will store the local path (i.e. the location of the image file on the PC being used to author the page) so that when the page is previewed, the images will be visible. Before uploading the HTML and image files to a web server, the image file paths must be changed to reflect the structure, and possibly location, of the site itself. Cascade DTP assists here by enabling the web server path for images to be added automatically according to information from the Page Setup dialog (menu bar). The server path (either absolute or relative) should be entered in the box labelled 'Web server image path'. The path must include the final forward slash (i.e. the one that will immediately precede the image file name). Clicking Save HTML (menu bar) will enable you to generate an HTML file for the currently open page, and if Use web server image file path... is left checked, the HTML code will contain the path required for the final site. Note: cas4 files generated by releases of Cascade DTP earlier than build 022 will not be able to add the image file name to the web server path. However, you can correct this by re-opening the image files using the Place Image dialog and then saving the .cas4 file. If you are new to building websites and are confused by these issues, please seek advice from the server administrator or your Internet service provider (ISP).
Shortcut Key Summary
Note: function keys will not operate when the Box Preview window is open.
General
F1 - launch Help
F9 - toggle layout grids on/off
F12 - Output (preview page in browser)
Tab - Cycle selection of text or image boxes
Ctrl + B - New text box
Ctrl + I - List text boxes
Ctrl + L - List text classes
Ctrl + N - New File
Ctrl + O - Open File
Ctrl + P - Price Media on the web
Ctrl + S - Save file (.cas4)
Ctrl + W - New text class
Ctrl + Z - Save As (File)
Text Editor Dialog
F2 - insert break (br /) tag
F3 - insert paragraph (p) tags
F7 - insert font color tag
F8 - insert font face tag
F11 - refresh tag highlighting
Ctrl + A - Select all
Ctrl + C - Copy
Ctrl + E - Place cursor at end of text
Ctrl + H - Place cursor at beginning of text
Ctrl + V - Paste
Ctrl + X - Cut
Text Box Properties Dialog
F5 - reduce font size by 1 point
F6 - increase font size by 1 point.
Ctrl + L - Left alignment
Ctrl + C - Center alignment
Ctrl + J - Justified alignment
Ctrl + R - Right alignment
Ctrl + N - Regular font
Ctrl + B - Bold font
Ctrl + I - Italic font
Ctrl + O - Bold and Italic font
Ctrl + K - Lock box
Ctrl + U - Unlock box
Border Style Dialog
Ctrl + L - Solid
Ctrl + D - Dashed
Ctrl + O - Double
Ctrl + T - Dotted
Place Image Dialog
Ctrl + K - Lock box
Ctrl + U - Unlock box
Style Sheet Editor Dialog
Ctrl + A - Select all
Ctrl + C - Copy
Ctrl + E - Place cursor at end of text
Ctrl + H - Place cursor at beginning of text
Ctrl + V - Paste
Ctrl + X - Cut
PRICE MEDIA
August 2006
Web link: www.price-media.demon.co.uk
e-mail: enquiries@price-media.demon.co.uk